<template>
  <!-- 列表 -->
  <ContentWrap>
    <el-button
      type="primary"
      plain
      @click="openForm('create')"
      v-hasPermi="['erp:sale-bom:create']"
    >
      <Icon icon="ep:plus" class="mr-5px" /> 新增
    </el-button>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="唯一标识，VARCHAR(19)" align="center" prop="id" />
      <el-table-column label="生产单id" align="center" prop="productOrderId" />
       <el-table-column label="类型" align="center" prop="type">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.MATERIAL_TYPE" :value="scope.row.type" />
        </template>
      </el-table-column>
      <el-table-column label="计算长" align="center" prop="calculatedLength" />
      <el-table-column label="计算宽" align="center" prop="calculatedWidth" />
      <el-table-column label="采购长" align="center" prop="purchasedLength" />
      <el-table-column label="采购宽" align="center" prop="purchasedWidth" />
      <el-table-column label="采购数量" align="center" prop="purchasedQuantity" />
      <el-table-column label="需求数" align="center" prop="demandQuantity" />
      <el-table-column label="长开" align="center" prop="longCut" />
      <el-table-column label="宽开" align="center" prop="wideCut" />
      <el-table-column label="单位" align="center" prop="unit">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.VALUATION_UNIT" :value="scope.row.unit" />
        </template>
      </el-table-column>
      <el-table-column label="横压1" align="center" prop="horizontalPress1" />
      <el-table-column label="横压2" align="center" prop="horizontalPress2" />
      <el-table-column label="横压3" align="center" prop="horizontalPress3" />
      <el-table-column label="横压4" align="center" prop="horizontalPress4" />
      <el-table-column label="横压5" align="center" prop="horizontalPress5" />
      <el-table-column label="纵压1" align="center" prop="verticalPress1" />
      <el-table-column label="纵压2" align="center" prop="verticalPress2" />
      <el-table-column label="纵压3" align="center" prop="verticalPress3" />
      <el-table-column label="纵压4" align="center" prop="verticalPress4" />
      <el-table-column label="纵压5" align="center" prop="verticalPress5" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="材质编号" align="center" prop="materialCode" />
      <el-table-column label="材质名称" align="center" prop="materialName" />
      <el-table-column label="材质ID" align="center" prop="materialId" />
      <el-table-column label="压线类型" align="center" prop="pressLineType" />
      <el-table-column label="数量比" align="center" prop="quantityRatio" />
      <el-table-column label="已采购净板数" align="center" prop="purchasedCleanBoardQuantity" />
      <el-table-column label="用料来源" align="center" prop="materialSource">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.SOURCE" :value="scope.row.materialSource" />
        </template>
      </el-table-column>
      <el-table-column label="计算数量" align="center" prop="calculatedQuantity" />
      <el-table-column label="印刷预损数" align="center" prop="printingLossQuantity" />
      <el-table-column label="供应商ID" align="center" prop="supplierId" />
      <el-table-column label="供应商编号" align="center" prop="supplierCode" />
      <el-table-column label="供应商名称" align="center" prop="supplierName" />
      <el-table-column label="总件" align="center" prop="totalItems" />
      <el-table-column label="净板系数" align="center" prop="cleanBoardCoefficient" />
      <el-table-column label="面积报价" align="center" prop="areaQuotation" />
      <el-table-column label="毛板面积" align="center" prop="grossBoardArea" />
      <el-table-column label="净板面积" align="center" prop="netBoardArea" />
      <el-table-column label="单个核算成本" align="center" prop="singleCalculationCost" />
      <el-table-column label="厚度" align="center" prop="thickness" />
      <el-table-column label="底数" align="center" prop="bottomNumber" />
      <el-table-column label="单品用量" align="center" prop="singleItemConsumption" />
      <el-table-column label="总开数" align="center" prop="totalOpenCount" />
      <el-table-column label="模数" align="center" prop="modulus" />
      <el-table-column label="密度" align="center" prop="density" />
      <el-table-column label="刀模编号" align="center" prop="dieCuttingNumber" />
      <el-table-column label="刀模ID" align="center" prop="dieCuttingId" />
      <el-table-column label="模切数" align="center" prop="dieCuttingQuantity" />
      <el-table-column label="模长" align="center" prop="dieCuttingLength" />
      <el-table-column label="模宽" align="center" prop="dieCuttingWidth" />
      <el-table-column label="需彩购数量" align="center" prop="needColorPurchaseQuantity" />
      <el-table-column label="部件长" align="center" prop="componentLength" />
      <el-table-column label="部件宽" align="center" prop="componentWidth" />
      <el-table-column label="部件厚度" align="center" prop="componentThickness" />
      <el-table-column label="切刀长度" align="center" prop="cuttingToolLength" />
      <el-table-column label="压线长度" align="center" prop="pressLineLength" />
      <el-table-column label="损耗率" align="center" prop="lossRate" />
      <el-table-column label="单片重量" align="center" prop="singleWeight" />
      <el-table-column label="单个产出数" align="center" prop="singleOutputQuantity" />
      <el-table-column label="单个原料重量" align="center" prop="singleRawMaterialWeight" />
      <el-table-column label="卷数" align="center" prop="coilNumber" />
      <el-table-column label="库存数" align="center" prop="inventoryQuantity" />
      <el-table-column label="总长" align="center" prop="totalLength" />
      <el-table-column label="长损耗" align="center" prop="lengthLoss" />
      <el-table-column label="宽损耗" align="center" prop="widthLoss" />
      <el-table-column label="每卷长度" align="center" prop="perRollLength" />
      <el-table-column label="比例数" align="center" prop="ratioQuantity" />
      <el-table-column label="可用库存" align="center" prop="availableInventory" />
      <el-table-column label="客户预损" align="center" prop="customerLoss" />
      <el-table-column label="参数1" align="center" prop="parameter1" />
      <el-table-column label="参数2" align="center" prop="parameter2" />
      <el-table-column label="参数3" align="center" prop="parameter3" />
      <el-table-column label="参数4" align="center" prop="parameter4" />
      <el-table-column label="参数5" align="center" prop="parameter5" />
      <el-table-column label="参数6" align="center" prop="parameter6" />
      <el-table-column label="参数7" align="center" prop="parameter7" />
      <el-table-column label="参数8" align="center" prop="parameter8" />
      <el-table-column label="参数9" align="center" prop="parameter9" />
      <el-table-column label="参数10" align="center" prop="parameter10" />
      <el-table-column label="报价单位" align="center" prop="quotationUnit">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.VALUATION_UNIT" :value="scope.row.quotationUnit" />
        </template>
      </el-table-column>
      <el-table-column label="成本计算公式" align="center" prop="costCalculationFormula" />
      <el-table-column label="用料平方" align="center" prop="materialSquareMeter" />
      <el-table-column label="修边" align="center" prop="trimming" />
      <el-table-column label="后工序预损" align="center" prop="postProcessLoss" />
      <el-table-column label="备注1" align="center" prop="remark1" />
      <el-table-column label="备注2" align="center" prop="remark2" />
      <el-table-column label="备注3" align="center" prop="remark3" />
      <el-table-column label="备注4" align="center" prop="remark4" />
      <el-table-column label="备注5" align="center" prop="remark5" />
      <el-table-column label="占用标签" align="center" prop="labelUsage" />
      <el-table-column label="库存占用数" align="center" prop="inventoryOccupyQuantity" />
      <el-table-column label="原纸规格" align="center" prop="rawMaterialSpecification" />
      <el-table-column label="规格计算类型" align="center" prop="specificationCalculationType" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="openForm('update', scope.row.id)"
            v-hasPermi="['erp:sale-bom:update']"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            @click="handleDelete(scope.row.id)"
            v-hasPermi="['erp:sale-bom:delete']"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
    <!-- 表单弹窗：添加/修改 -->
    <SaleBomMaterialForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { SaleBomApi } from '@/api/erp/salebom'
import SaleBomMaterialForm from './SaleBomMaterialForm.vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const props = defineProps<{
  bomId?: number // bomId（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  bomId: undefined as unknown
})

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => props.bomId,
  (val: number) => {
    if (!val) {
      return
    }
    queryParams.bomId = val
    handleQuery()
  },
    { immediate: true, deep: true }
)

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await SaleBomApi.getSaleBomMaterialPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  if (!props.bomId) {
    message.error('请选择一个ERP销售管理-BOM')
    return
  }
  formRef.value.open(type, id, props.bomId)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await SaleBomApi.deleteSaleBomMaterial(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>